<!--
 * @Description: 实名认证页面
 * @Author: yyh
 * @Date: 2021-06-30 16:00:00
 * @LastEditors: yyh
 * @LastEditTime: 2021-07-02 11:22:04
-->
<template>
  <div class="authentication">
    <div class="title" >
      <van-nav-bar
        class="back"
        title="实名认证"
        left-arrow
        @click-left="back"
        border:false
      />
    </div>
    <div>
      <!-- 头像 -->
      <div class="photo">
        <div class="icon">
          <van-image round width="6rem" height="6rem" src="http://bpic.588ku.com/element_pic/18/03/05/2d976856bb2021f4d43a2b28917b0aaf.jpg"/>
        </div>
        <p class="p1">进行实名认证</p>
        <p class="p2">用于保障账号的安全及快速接收订单信息</p>
      </div>
    </div>
    <!-- 表单 -->
    <div>
      <van-form :model="form" ref="ruleForm">
        <van-field
          v-model="form.realname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
        />
        <van-field
          v-model="form.idCard"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />
        <van-field
          v-model="form.bankCard"
          name="银行卡号"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />
        </van-form>
        <van-field name="身份证正面照" label="身份证正面照">
          <template #input>
            <van-uploader 
            :after-read="afterRead_Positive"
            v-model="form.idcardPhotoPositive"
            multiple :max-count="1"
            :rules="[{ required: true, message: '上传身份证正面照' }]"
            />
            </template>
        </van-field>
        <van-field name="身份证反面照" label="身份证反面照">
          <template  #input>
            <van-uploader 
            :after-read="afterRead_Negative"
            v-model="form.idcardPhotoNegative"
            multiple :max-count="1"
            :rules="[{ required: true, message: '上传身份证反面照' }]"

            />
          </template>
        </van-field>
        <van-field name="银行卡照片" label="银行卡照片">
          <template  #input>
            <van-uploader 
            :after-read="afterRead_bankCard"
            v-model="form.bankCardPhoto"
             multiple 
            :max-count="1"
            :rules="[{ required: true, message: '上传银行卡照片' }]"
            />
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button class="btn" round block type="info" @click="onSubmit">提交</van-button>
        </div>
      
    </div>
  </div>
</template>

<script>
import { submitCertificationApply} from "@/api/authorization";
import 'vant/lib/index.less';
import { Dialog } from 'vant';
import { upDateFile } from "@/api/upFile";

export default {
  data() {
    return {
      idcardPhotoPositive:[],
      idcardPhotoNegative:[],
      bankCardPhoto:[],
      form:{},
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  computed: {},
  methods: {
    getid(){
      let a =this.$route.query.id
      // console.log(a)
      this.form.userId=a;
    },
    //上传头像后返回函数
    async afterRead_bankCard(file){
      let a = await upDateFile(file)
       this.bankCardPhoto=[{url:a}]
      // console.log(a)
    },
    //上传头像后返回函数
    async afterRead_Negative(file){
      let a = await upDateFile(file)
       this.idcardPhotoNegative=[{url:a}]

    },
    //上传头像后返回函数
    async afterRead_Positive(file) {
      let a = await upDateFile(file)
      this.idcardPhotoPositive=[{url:a}]
    },

    //返回到我的页面
    back(){
      this.$router.push({
        path:"/mine"
      })
    },
    //提交
    async onSubmit(){
        let temp ={          
          realname:this.form.realname,
          idCard:this.form.idCard,
          idcardPhotoPositive:this.idcardPhotoPositive.length===0?"":this.idcardPhotoPositive[0].url,
          idcardPhotoNegative:this.idcardPhotoNegative.length===0?"":this.idcardPhotoNegative[0].url,
          bankCard:this.form.bankCard,
          bankCardPhoto:this.bankCardPhoto.length===0?"":this.bankCardPhoto[0].url,
          userId:this.form.userId
        }
        let flag = 0;
        let res;
        for (const key in temp) {
          if (temp[key]===undefined||temp[key]==="") {
            flag=1;
            //提示弹框
            Dialog.alert({
                message: '信息不完善',
              }).then(() => {
            });        
          }
        }
        if(!flag){
          res = await submitCertificationApply(temp);
          console.log(res);    
          //提示弹框
          Dialog.alert({
                message: '已提交',
              }).then(() => {
          }); 
        }
    }
  },
  created() {
    this.getid()
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.title /deep/ .van-icon {
  color:#323233;
}
.back,.btn{
      
     
  background-image: linear-gradient(90deg,hsl(329.88, 100%, 50%) 0%, hsl(278.12, 100%, 50%) 100%);
}
.photo{
  text-align: center;

}
.icon{
  margin-top:10px;
}
.p1{
  color: #FF0033;
}
.p2{
  font-size: 15px;
  color: #CCCCCC;
}
</style>